<template>
	<view style="width: 100%;height: auto;float: left;">

		<view v-if="isShow" class="sy_main">
			<view class="uni-tab-item">
				<view class="uni-tab-item-title" v-for="(tab,index) in tabBars" :key="index" :data-current="index"
					@click="ontabtap" :class="tabIndex==index ? 'uni-tab-item-title-active' : ''">
					<view class="tab-text">{{tab}}</view>
					<view v-if="tabIndex==index" class="underiline"></view>
				</view>
				<view class="date-picker">
					<view v-if="tabIndex==0&&isToday" class="date-text">{{month}}月{{day}}日(今天)</view>
					<view v-if="tabIndex==0&&!isToday" class="date-text">{{month}}月{{day}}日</view>
					<view v-if="tabIndex==1" class="date-text">{{month}}月第{{week}}周</view>
					<view v-if="tabIndex==2" class="date-text">{{year}}年{{month}}月</view>
					<image src="../../components/uni-datetime-picker/cale-50.png" mode=""></image>
				</view>
				<!-- <text class="uni-tab-item-title t23 uni-tab-item-title-active" style="margin: 0;float: right;"
					@click="rimingxi" v-if="tabIndex==0">更多</text> -->
			</view>
			<view class="total">
				<view class="t1">总收益(元):</view>
				<view class="t28" v-if="tabIndex == 0">{{shouyiMes.tradeInc/100}}</view>
				<view class="t28" v-if="tabIndex == 1">{{shouyiMes.bweekInc/100}}</view>
				<view class="t28" v-if="tabIndex == 2">{{shouyiMes.monthInc/100}}</view>
			</view>

		</view>
		<datePicker ref="myPicker" @submit="handleSubmit" :start-year="2020" :end-year="2030" :pickType=getType() />

		<!-- <view class="bai"></view> -->
		<!-- <view class="cy_list" @click="xq(1)">
			<view class="cy_li">
				<view class="cy_li_le">
					<text class="cy_li_tit t22">当代店</text>
					<text class="cy_li_tit t20 tri">+100元</text>
					<text class="cy_li_tit t22" style="width: 30%;">支付宝付款</text>
					<text class="cy_li_tit tri t22" style="width: 70%;">2021-02-28 12:00:00</text>
				</view>
				<view class="cy_li_ri">
					<image src="../../static/img/turn.png" class="cy_li_ri_img" mode="widthFix"></image>
				</view>
			</view>
		</view> -->
		<!-- <view class="cy_list t1">收益列表</view> -->
		<view class="cy_list">
			<view class="cy_li t1" style="padding-bottom: 4vw; text-align: center;">收益列表</view>
			<view class="cy_li" v-for="(item,index) in list" :key="'ii2-'+index" @click="xq(item.id,item.amount)">
				<view class="cy_li_le">
					<text class="cy_li_tit t5">{{item.payerNickName}}</text>
					<text class="cy_li_tit t20 tri">+{{item.amount/100}}元</text>
					<text class="cy_li_tit t22" style="width: 30%;" v-if="item.payType==1">招财阿咪</text>
					<text class="cy_li_tit t22" style="width: 30%;" v-if="item.payType==6">支付宝小程序</text>
					<text class="cy_li_tit t22" style="width: 30%;" v-if="item.payType==3">微信</text>
					<text class="cy_li_tit t22" style="width: 30%;" v-if="item.payType==5">微信小程序</text>
					<text class="cy_li_tit t5 tri" style="width: 70%;">{{item.createdTime}}</text>
					<!-- <text class="cy_li_tit t1">{{item.addtime}}</text> -->
				</view>
				<view class="cy_li_ri">
					<!-- <image src="../../static/img/turn.png" class="cy_li_ri_img" mode="widthFix"></image> -->
				</view>
			</view>

			<view class="zanwu" v-show="jiazai" style="padding: 4vw 0;"><text class="t7">{{more}}</text></view>
			<view class="zanwu" v-show="zanwu" style="padding: 4vw 0;">
				<image src="../../static/img/kong.png" mode="widthFix" style="margin-left: 25vw;"></image><text
					class="t8">{{wu}}</text>
			</view>
		</view>
	</view>
</template>
<script>
	import datePicker from '@/components/date-picker.vue';

	export default {
		data() {
			return {
				Inv: 0,
				mainid: '',
				list: [],
				pages: 1,
				ismore: true,
				more: '加载更多',
				jiazai: false,
				wu: "暂无数据",
				zanwu: false,
				zonge: 0,
				tabBars: ['按日', '按周', '按月', ],
				tabIndex: 0,
				shouyiMes : {
					tradeInc : 0,
					bweekInc : 0,
					monthInc : 0
				},
				year: '',
				month: '',
				day: '',
				week: '',
				isToday: true,
				
				isShow:true //上架审核暂时关闭
			}
		},
		components: {
			datePicker
		},
		onLoad(param) {
			if(param && param.id){
				this.mainid = param.id;
				this.mingxi();
				this.jinrishouyi();
				this.getDayList();
			}else{
				var _this = this;
				uni.getStorage({
					key: 'user',
					success: res=> {
						_this.mainid = res.data.id;
						_this.mingxi();
						_this.jinrishouyi()
						_this.getDayList();
					}
				});
			}
			this.initDate()
		},

		// 监听触底
		onReachBottom() {
			//阻止重复加载
			if (this.ismore == false) {
				return;
			}
			this.pages++;
			this.mingxi();

		},
		methods: {

			getType() {
				switch (this.tabIndex) {
					case 0:
						return 'day';
					case 1:
						return 'week'
					case 2:
						return 'month'
					default:
						break;
				}
			},
			ontabtap(e) {
				this.tabIndex = e.currentTarget.dataset.current
				console.log("tab: ", e);
				this.initDate()
			},

			openDatePicker() {
				this.$refs.myPicker.show()
			},
			handleSubmit(e) {
				console.log("选择日期: ", e);
				this.year = e.year
				this.month = e.month
				this.day = e.day
				this.isToday = false
				this.week = e.week.num

			},
			initDate() {
				let now = new Date()
				this.year = now.getFullYear()
				this.month = now.getMonth() + 1
				this.day = now.getDate()
				this.week = this.getMonthWeek(this.year, this.month, this.day)
			},
			getMonthWeek(y, m, d) {
				let date = new Date(y, parseInt(m) - 1, d),
					week = date.getDay(),
					day = date.getDate();
				return Math.ceil((day + 6 - week) / 7);
			},
			myTeam(type) {
				var _that = this;
				_that.Inv = type;
				_that.pages = 1;
				if (type == 0) {
					_that.huiyuan();
				} else {
					_that.mingxi();
				}
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			bindDateChange: function(e) {
				this.date = e.detail.value
			},
			// scroll(e) {
			// 	this.old.scrollTop = e.detail.scrollTop
			// 	console.log(e.detail.scrollTop);
			// },
			//记录滚动条位置
			goTop() {
				uni.pageScrollTo({
					scrollTop: 0 //距离页面顶部的距离
					// duration: 300
				});
			},


			xq(id, amount) {
				return;
				uni.navigateTo({
					url: '/pages/mingxi/mingxi_jiaoyi_log?id=' + id + '&amount=' + amount
				});
			},
			getDayList() {
				let data = {
					id: this.mainid,
					time: '2021-09-12'
				}
				this.$request.post(`mch/pagePaymentByDay`, data, 'json')
					.then(res => {
						console.log("日普通消费列表 res:", res)
					}).catch(err => {
						console.log("日普通消费列表 err:", err)
					})
			},
			jinrishouyi() {
				uni.request({
					header: {
						'Content-Type': 'application/x-www-form-urlencoded', //自定义请求头信息
					},
					url: getApp().globalData.url + 'user/getTradeInc/' + this.mainid, //仅为示例，并非真实接口地址。
					method: 'POST',
					data: {
						id: this.mainid, //	用户ID（mainId）		true	string
					},
					success: (res) => {
						console.log("今日收益: ", res);
						this.shouyiMes = res.data.data;
					},
					fail: (error) => {
						console.log(error)
					}
				});
			},
			//获取普通消费列表
			mingxi() {
				var data = {
					id: this.mainid, //	用户ID（mainId）		true	string
					page: this.pages, //	page
				}
				uni.request({
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
					},
					url: getApp().globalData.url + 'mch/pagePaymentPage/' + this.mainid + '/' + this
						.pages, //仅为示例，并非真实接口地址。
					method: 'POST',
					data: data,
					success: (res) => {
						console.log("普通消费列表: ", res);
						if (res.data.status == '200') {
							if (res.data.data.pages == this.pages) {
								this.more = "没有更多数据了";
								this.jiazai = true;
								this.zanwu = false;
								this.ismore = false;
							} else if (res.data.data.pages == 0) {
								this.more = "暂无数据";
								this.jiazai = false;
								this.zanwu = true;
								this.ismore = false;
							} else {
								this.more = "加载更多";
								this.jiazai = true;
								this.zanwu = false;
								this.ismore = true;
							}
							if (this.pages == 1) {

								this.list = res.data.data.records;
							} else {
								for (var i = 0; i < res.data.data.records.length; i++) {
									this.list.push(res.data.data.records[i]);
								}
							}
						}
					},
					fail: (error) => {
						uni.hideLoading();
						// this.checks = true
						uni.showToast({
							title: error,
							icon: 'none',
							duration: 2000
						});
						console.log(error)
					}
				});
			},
		}
	}
</script>

<style>
	.sy_main {
		width: 90%;
		height: auto;
		background: url(../../static/img/settlement_bg.png) no-repeat top center;
		margin: 2vw 5%;
		padding: 30upx 0;
		background-size: 100%;
		border-radius: 2vw;
	}

	.sy_main .uni-tab-item {
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
	}

	.sy_main .uni-tab-item-title {
		padding: 20upx;
	}

	.sy_main .tab-text {
		font-size: 30upx;
		color: #000000;
		font-weight: 500;
	}

	.sy_main .underiline {
		height: 4upx;
		background-color: #000000;
		width: 100%;
		margin-top: 3upx;
	}

	.sy_main .date-picker {
		display: flex;
		align-items: center;
		margin-left: auto;
		margin-right: 30upx;
		background: #FFFFFF;
		opacity: 0.8;
		border-radius: 8upx;
		/* padding: 20upx 0; */
	}

	.date-text {
		font-size: 28upx;
		margin-left: 10upx;
	}

	.sy_main .date-picker image {
		width: 50upx;
		height: 50upx;
		margin-left: 10upx;
	}

	.sy_main .total {
		display: flex;
		align-items: center;
		padding-left: 30upx;
	}

	.sy_main .t28 {
		margin-left: 30upx;
	}

	.inv-h-w {
		background-color: #FFFFFF;
		height: 10vw;
		display: flex;
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
	}

	.inv-h {
		font-size: 0.8rem;
		flex: 1;
		text-align: center;
		color: #333;
		height: 10vw;
		line-height: 10vw;
	}

	.inv-h-se {
		color: #F1C75E;
		border-bottom: 1vw solid #F1C75E;
	}



	.loading {
		text-align: center;
		line-height: 10vw;
	}

	.cy_user {
		width: 90%;
		height: auto;
		display: block;
		float: left;
		margin: 2vw 5%;
		background: -webkit-linear-gradient(#8A3DE2, #9C4BF9);
		background: -o-linear-gradient(#8A3DE2, #9C4BF9);
		background: -moz-linear-gradient(#8A3DE2, #9C4BF9);
		background: linear-gradient(#8A3DE2, #9C4BF9);
		border-radius: 1vw;
		padding: 4vw;
		box-shadow: 0px 0px 5px #F2F2F2;
	}

	.cy_user_tit {
		width: 100%;
		height: 18vw;
		line-height: 8vw;
		display: block;
		float: left;
		text-align: left;
		margin-bottom: 2vw;
		border-bottom: 1px solid #fff;
		text-align: center;
		padding-bottom: 2vw;
	}

	.cy_user_into {
		width: 33.33%;
		height: auto;
		display: block;
		float: left;
		line-height: 7vw;
		display: block;
		float: left;
		margin: 2vw 0;
		text-align: center;
	}

	.cy_user_input {
		width: 20vw;
		height: 7vw;
		display: block;
		float: right;
		background: url(../../static/img/but.png)no-repeat top center;
		background-size: 100%;
		text-align: center;
		line-height: 7vw;
		margin: 1vw 0;
	}

	.cy_user_into text {
		margin-right: 2vw;
	}

	.cy_list {
		width: 90%;
		height: auto;
		display: block;
		float: left;
		margin: 0 5%;
		margin-bottom: 7vw;
		/* box-shadow: 0px 0px 1vw #ccc; */
		border-radius: 2vw;
		padding: 4vw;
		background: #fff;
		margin-top: 1vw;
	}

	.cy_li {
		width: 100%;
		height: auto;
		display: block;
		float: left;
		/* margin-bottom: 4vw; */
		border-bottom: 1px solid #F2F2F2;
		padding: 3vw 0;
		/* padding-bottom: 4vw; */
	}

	.cy_li:last-child {
		border: none;
	}

	.cy_li .cy_img {
		width: 16vw;
		height: 16vw;
		display: block;
		float: left;
		margin: 2vw 0;
		border-radius: 2vw;
		overflow: hidden;
		border: 1px solid #F8F8F8;
		margin-right: 2vw;
	}

	.cy_li .cy_img image {
		width: 16vw;
		height: auto;
		display: block;
		float: left;
	}

	.cy_li_tit {
		width: 50%;
		height: auto;
		line-height: 9vw;
		display: block;
		float: left;
	}

	.cy_li_tit1 {
		width: 100%;
		height: auto;
		line-height: 9vw;
		display: block;
		float: left;
	}


	.cy_li_info {
		width: 100%;
		height: 7vw;
		line-height: 7vw;
		display: block;
		float: left;
		padding: 0 3vw;
	}

	.tri {
		text-align: right;
	}

	.cy_list_tit {
		width: 100%;
		height: 12vw;
		line-height: 12vw;
		display: block;
		float: left;
		text-align: center;
	}

	.cen {
		text-align: center;
		width: 44%;
	}

	.tabshow {
		width: 100%;
		height: auto;
		display: block;
		float: left;
		background: #fff;
		position: fixed;
		top: 10vw;
		left: 0;
		padding: 3vw 5vw;
	}

	.tabshow_li {
		width: 100%;
		height: auto;
		display: block;
		float: left;
	}

	.show_tit {
		width: 30%;
		height: 10vw;
		line-height: 10vw;
		display: block;
		float: left;
	}

	.show_ri {
		width: 70%;
		height: 10vw;
		line-height: 10vw;
		display: block;
		float: left;
		text-align: right;
	}

	.bai {
		width: 100%;
		height: 14vw;
		display: block;
		float: left;
	}

	.cy_li image.cy_li_ri_img {
		width: 2vw;
		float: right;
		margin-top: 8vw;
	}

	.cy_li_le {
		width: 90%;
		float: left;
	}

	.cy_li_ri {
		width: 10%;
		float: right;
	}

	.zanwu {
		margin-bottom: 10vw;
	}

	.cy_main {
		width: 75%;
		height: auto;
		float: left;
		margin-top: 1vw;
	}
</style>
